<template>
  <div class="sign-in">
    <div class="form">
      <p class="title">找回密码</p>
      <div class="input-container">
        <input
          type="text"
          id="uid"
          @focus="onFocus"
          @blur="onBlur"
          required
          name="uid"
          class="active"
          v-model="uid"
          :disabled="ifRight"
        />
        <label for="uid">UID</label>
        <i class="under"></i>
      </div>

      <div v-if="!ifRight" style="width: 100%">
        <div class="input-container">
          <input
            type="text"
            id="phone_number"
            class="active"
            required
            name="phone_number"
            v-model="phone_number"
            @focus="onFocus"
            @blur="onBlur"
          />
          <label for="uid">手机号码</label>
          <i class="under"></i>
        </div>
        <input type="submit" @click="sendVertification" value="发送验证码" id="btn1" />
        <div class="input-container">
          <input
            type="text"
            id="code"
            class="active"
            required
            v-model="code"
            name="code"
            @focus="onFocus"
            @blur="onBlur"
          />
          <label for="uid">验证码</label>
          <i class="under"></i>
        </div>
        <input type="submit" @click="checkVerification()" value="验证" id="btn1" />
      </div>
      <div v-else style="width: 100%">
        <div class="input-container">
          <input
            :type="pwdType"
            id="pwd"
            class="active"
            required
            name="password"
            v-model="password"
            @focus="onFocus"
            @blur="onBlur"
          />
          <label for="uid">新密码</label>
          <i class="under"></i>
        </div>
        <div class="view-icon">
          <el-icon v-if="showPwd" @click="hidePassword">
            <sunny />
          </el-icon>
          <el-icon v-else @click="showPassword">
            <sunrise />
          </el-icon>
        </div>
        <input type="submit" @click="submitNewpass()" value="提交" id="btn" />
      </div>
      <p>
        <router-link to="/">返回登录界面</router-link>
      </p>
    </div>
    <!-- 
    <el-button @click="test_api">click</el-button>-->
  </div>
</template>

<script>
// import { idApi } from "../api/index.js";
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  name: "Forget",
  data() {
    return {
      uid: "",
      password: "",
      code: "",
      phone_number: "",
      showMsg: false,
      msg: "",
      isOk: false,
      ifRight: false,
      showPwd: false,
      pwdType: "password",
    };
  },
  methods: {
    checkForm() {
      axios
        .post(
          "http://114.132.177.63/userFunc/login/",
          "uid=" + this.uid + "&password=" + this.password
        )
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage({
              message: "登陆成功",
              grouping: true,
              type: "success",
            });
            this.$router.push({
              path: "/user",
            });
          } else {
            ElMessage({
              message: "账号或密码错误！",
              grouping: true,
              type: "error",
            });
          }
        });
    },
    checkVerification() {
      axios
        .get("http://114.132.177.63/userFunc/sms_check/", {
          params: { phone: this.phone_number, code: this.code },
        })
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage({
              message: "验证码正确",
              grouping: true,
              type: "success",
            });
            this.ifRight = true;
          } else {
            ElMessage({
              message: "验证码错误",
              grouping: true,
              type: "error",
            });
          }
        });
    },
    sendVertification() {
      axios
        .get("http://114.132.177.63/userFunc/sms_send/", {
          params: { phone: this.phone_number },
        })
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage({
              message: "发送成功",
              grouping: true,
              type: "success",
            });
          } else {
            ElMessage({
              message: "发送失败",
              grouping: true,
              type: "error",
            });
          }
        });
    },
    submitNewpass() {
      axios
        .post(
          "http://114.132.177.63/userFunc/password_forget/",
          "uid=" +
            this.uid +
            "&new_password1=" +
            this.password +
            "&new_password2=" +
            this.password
        )
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage({
              message: "设置成功",
              grouping: true,
              type: "success",
            });
            this.$router.push({
              path: "/",
            });
          } else {
            ElMessage({
              message: "设置失败",
              grouping: true,
              type: "error",
            });
          }
        });
    },
    onFocus(e) {
      e.target.classList.add("active");
    },
    onBlur(e) {
      if (!e.target.value.length) e.target.classList.remove("active");
    },
    showPassword() {
      this.pwdType = "text";
      this.showPwd = true;
    },
    hidePassword() {
      this.pwdType = "password";
      this.showPwd = false;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.sign-in {
  position: relative;
  width: 100vw;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  margin-bottom: 2vw;
}

.form {
  width: 40vw;
  padding: 2% 5% 2% 5%;
  border-radius: 109px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 74.45px;
  color: rgba(0, 89, 88, 1);
  text-align: center;
  vertical-align: top;
}
.input-container {
  position: relative;
  width: 100%;
  margin: 5% 0;
}

.input-container input {
  width: 100%;
  background: transparent;
  outline: none;
  border: none;
  color: #222;
  padding: 8px;
}

.input-container label {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(61, 61, 61, 1);
  text-transform: uppercase;
  pointer-events: none;
  transition: 0.5s;
  font-weight: bold;
}

.input-container input:valid ~ label,
.input-container input:focus ~ label {
  color: rgb(10, 131, 212);
  transform: translateY(-15px);
  font-size: 0.6rem;
}

.input-container .under {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: transparent;
}

.input-container .under:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(139, 176, 175, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  animation: animate 3s linear infinite;
}
#btn {
  height: 40px;
  margin: 30px 0;
  width: 30vw;
  align-self: center;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  border-radius: 56.5px;
  background: linear-gradient(
      90deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  backdrop-filter: blur(10px);
}

#btn:hover {
  background: linear-gradient(
      0deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
}

#btn1 {
  height: 40px;
  margin: 30px 0;
  width: 30vw;
  align-self: center;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  border-radius: 56.5px;
  background: linear-gradient(
      90deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  backdrop-filter: blur(10px);
}

#btn1:hover {
  background: linear-gradient(
      0deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--color2-light) inset;
}

.form p {
  margin: 10px 0;
}

.form p a {
  text-decoration: none;
  padding: 0 5px;
  font-weight: bold;
  color: var(--color1-light);
}

.view-icon {
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  font-size: 20px;
  transform: translateY(-50%);
  color: var(--color1-dark);
  cursor: pointer;
}
</style>
